<template>
	<div class="module-box link-select mt5">
		<div class="link-select__warp">
			<el-select class="link-select__select" v-model="selectValue" placeholder="请选择跳转到的页面" @change="selectChanged">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
		</div>
		<div class="link-select__confirm" v-show="confirmBtnVisible">
			<div class="btn" v-if="!selectLabel" @click="openDialog">
				<span class="iconfont">&#xe685;</span> 添加
			</div>
			<div class="info" v-else>
				<span class="name">{{selectLabel}}</span>
				<span class="iconfont" @click="openDialog">&#xe66c;</span>
				<span class="iconfont" @click="delSelect">&#xe651;</span>
			</div>
		</div>
		<el-dialog title="选择自定义页面" v-model:visible="customVisible">
			<custom-page-select ref="customPageSelect"></custom-page-select>
			<template v-slot:footer>
				<span class="dialog-footer">
					<el-button @click="customVisible = false">取 消</el-button>
					<el-button type="primary" @click="customChanged">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, watch, getCurrentInstance, } from 'vue';
	import CustomPageSelect from '/@/views/decorator/components/toolBar/module/custom-page-select.vue';
	export default {
		name: 'tool-select-link',
		components: {
			CustomPageSelect,
		},
		props: {
			title: {
				type: String,
				default: '链接'
			},
			linkObj: {
				type: Object,
				default: () => ({
					value: '',
					label: '',
				})
			},
			options: {
				type: Array,
				default: () => [
					{
						value: 'http://www.baidu.com',
						label: '百度网页'
					},
					{
						value: 'custom',
						label: '自定义'
					},
				]
			}
		},
		setup(props, { emit }) {
			const { proxy } = getCurrentInstance() as any;
			const state = reactive({
				selectValue: '',
				selectLabel: '',
				confirmBtnVisible: false,
				customVisible: false
			});
			
			// 链接选择
			const selectChanged = (value) => {
				state.selectLabel = '';
				if(value == 'custom'){
					state.confirmBtnVisible = true;
				}else{
					state.confirmBtnVisible = false
					let linkObj = {
						selectValue: state.selectValue,
						selectLabel: state.selectLabel,
					}
					emit('update:linkObj', linkObj);
				}
			};
			
			// 打开添加弹窗
			const openDialog = () => {
				
			};
			
			// 自定义页面选择
			const customChanged = () => {
				state.customVisible = false
				state.selectLabel = proxy.$refs.customPageSelect.tableRadio.name;
				let linkObj = {
					selectValue: state.selectValue,
					selectLabel: state.selectLabel,
				}
				emit('update:linkObj', linkObj);
			}
			
			// 删除选择
			const delSelect = () => {
				let linkObj = {
					selectValue: '',
					selectLabel: '',
				}
				emit('update:linkObj', linkObj);
			}
			
			onMounted(() => {
				state.selectValue = props.linkObj.selectValue;
				state.selectLabel = props.linkObj.selectLabel;
				state.confirmBtnVisible = state.selectValue !== 'custom' && state.selectValue;
			})
			
			//监听model数据
			watch(() => props.linkObj, (newVal) => {
				state.selectValue = newVal.selectValue
				state.selectLabel = newVal.selectLabel
				state.confirmBtnVisible = state.selectValue !== 'custom' && state.selectValue;
			}, {
				deep: true
			});
			
			return {
				selectChanged,
				customChanged,
				openDialog,
				delSelect,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.link-select {
		&__select {
			width: 100%;
		}

		&__confirm {
			margin-top: 10px;

			.btn {
				text-align: center;
				background-color: #409EFF;
				color: #fff;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
				cursor: pointer;
			}

			.info {
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
				padding: 0 10px;
				border: 1px solid #409EFF;
				display: flex;

				.text {
					color: #409EFF;
				}

				.name {
					flex: 1;
					margin-left: 10px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.iconfont {
					margin-left: 10px;
					cursor: pointer;
					color: #666;
				}
			}
		}

		&.style1 {
			.link-select__warp {
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;
			}

			width: 100%;
			margin-bottom: 0;

			.module-box__title {
				margin-bottom: 0;
			}

			.link-select__select {
				width: auto;
			}
		}
	}
</style>
